<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <title>Document</title>
</head>
<body>
      <div id="app">
          <table border="1">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
           <tr v-for='(item,index) in table'>
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.class}}</td>
                 <td>
                     <button>毕业</button>
                     <button  @click='err(index)'>编辑</button>
                     <button @click='del(index)'>删除</button>
                </td>
           </tr>
          </table>
          <form>
              <label>姓名</label>
              <input type="text" v-model='form.name' >
              <br>
              <label>班级</label>
              <select v-model='form.classs'>
                  <option value="1" v-for='item in option'>{{item.class}}</option>
              </select>
              <br>
              <button type="button" @click='submit'>提交</button>
          </form>
      </div>
      <script>
          new Vue({
              el:'#app',
              data(){
                  return{
                      isadd:false,
                      form:{
                        name:'',
                        classs:''
                      },
                      table:[
                          {
                              id:1,
                              name:'梵蒂冈',
                              class:'1班'
                          },
                          {
                              id:2,
                              name:'二维火',
                              class:'2班'
                          },
                      ],
                      option:[
                          {
                              class:'1班'
                          },
                          {
                              class:'2班'
                          },
                          {
                              class:'3班'
                          },
                      ]
                  }
              },
              methods:{
                  //新增 or 编辑
                submit(){
                    
                        const obj={
                        id:Date.now(),
                        name:this.form.name,
                        class:this.form.classs
                    }
                    this.table.unshift(obj)
                    
                  
                },
                //删除
                del(index){
                    if(confirm('确定要删除吗')){
                        this.table.splice(index,1)
                    }else{
                        alert('删除失败');
                    }
                },
                err(index){
                    this.form.name=this.table[index].name
                    this.form.class=this.table[index].class   
                }
              }
          })
      </script>
</body>
</html>